import { useState } from 'react'
import reactLogo from './assets/react.svg'
import viteLogo from '/vite.svg'
import './App.css'
import Start from "./pages/start/index";
import Editor from "./pages/editor/index"
import JSZip from "jszip";
import { openFile } from './js/file';
import { message } from 'antd';

function App() {
  const [data, setDataState] = useState([])
  const [page, setPage] = useState(0)
  
  const onImportProject = async () => {
    const file = await openFile({
      desc: '导入项目',
      accept: {
        "*/*": [".qtu"],
      }
    })
    const zip = new JSZip();
    const zipfile = await zip.loadAsync(file)
    console.log('%c 看看文件', 'color: #007', zipfile);
    const indexJs = zipfile.file('index.json');
    if (indexJs) {
      const json = await indexJs.async('string')
      setDataState(JSON.parse(json));
      setPage((count) => count + 1)
    } else {
      message.error('该项目文件没有索引');
    }
  }

  if (page) {
    return (
      <Editor initData={data} />
    )
  } else {
    return (<Start 
      onStart={() => setPage((count) => count + 1)}
      onImportProject={onImportProject} 
    />)
  }
}

export default App
